import './CoursePage.scss'
import CourseItem from './components/CourseItem/CourseItem';
import { useDispatch } from 'react-redux';
import { fetchGetCourseList } from '@/store/modules/student';
import { useSelector } from 'react-redux';
import { useEffect, useState } from 'react';
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Modal, ConfigProvider, Input, message, Empty } from 'antd';
import { joinCourseAPI } from '@/apis/student';


const colorBox = [
    {
        dark: '#ee4863',
        light: '#f8b37f'
    },
    {
        dark: '#1781b5',
        light: '#0eb0c9'
    },
    {
        dark: '#55bb8a',
        light: '#bacf65'
    },
    {
        dark: '#61649f',
        light: '#c08eaf'
    },
]

function CoursePage() {
    const dispatch = useDispatch();
    const { courseList } = useSelector(state => state.student);
    const { user_status } = useSelector(state => state.user);
    const [allChecked, setAllChecked] = useState(false);
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [loading, setLoading] = useState(false);
    const [newCourseName, setNewCourseName] = useState('');

    const showModal = () => {
        setIsModalOpen(true);
    };

    const handleAddCourse = async () => {
        setLoading(true);
        console.log(newCourseName);
        const res = await joinCourseAPI(newCourseName, user_status.token);
        setNewCourseName('');
        if (res.data.success) {
            message.success(res.data.message);
            await dispatch(fetchGetCourseList(user_status.token));
        } else {
            message.error(res.data.message);
        }
        setLoading(false);
        setIsModalOpen(false);
    };

    const handleCancelAddCourse = () => {
        setIsModalOpen(false);
    };


    // 当组件渲染完成时执行一次
    useEffect(() => {

        const getCourseList = async function () {
            if (courseList.length === 0) {
                await dispatch(fetchGetCourseList(user_status.token));
            }
        }

        getCourseList();

    }, [courseList])



    return (
        <div className="CoursePage">
            {
                courseList.length !== 0 &&
                (courseList[0].success ?
                    courseList.map(ele =>
                        <CourseItem
                            key={ele.id}
                            randbgk={colorBox[ele.id % 4]}
                            info={ele}
                        />
                    ) 
                    : <Empty 
                        className='empty'
                        image={Empty.PRESENTED_IMAGE_SIMPLE} 
                        description={
                            <span>
                                你还没有加入课程，点击右下角的图标添加
                            </span>
                        }
                    />)
            }
            <ConfigProvider
                theme={{
                    token: {
                        // Seed Token，影响范围大
                        colorPrimary: '#2486b9',
                        borderRadius: 5,

                        // 派生变量，影响范围小
                        // colorBgContainer: '#f6ffed',
                    },
                }}
            >
                <Button
                    type="primary"
                    onClick={showModal}
                    className='add-course'
                >
                    <PlusOutlined />
                </Button>
                <Modal
                    title={<h3>加入课程</h3>}
                    open={isModalOpen}
                    onCancel={handleCancelAddCourse}
                    footer={[
                        <Button key="back" onClick={handleCancelAddCourse}>
                            取消
                        </Button>,
                        <Button key="submit" type="primary" loading={loading} onClick={handleAddCourse}>
                            确定
                        </Button>
                    ]}
                    centered
                    width={480}
                >
                    <label htmlFor='newcoursename'>请输入课程邀请码</label>
                    <Input id='newcoursename' onInput={function (e) { setNewCourseName(e.target.value) }} value={newCourseName} />
                </Modal>
            </ConfigProvider>
        </div>
    )
}

export default CoursePage;